<template>
  <div class="app-container">
    <!--    <div class="title">{{ typeName }}-->
    <div class="title">
      <el-button size="mini" type="primary" @click="addQuestion">新增题目</el-button>
      <el-button size="mini" type="danger" @click="remove">删除题目</el-button>
      <el-button size="mini" type="warning" @click="Expire">批量失效</el-button>
      <el-button size="mini" type="warning" @click="Import">题库导入</el-button>
    </div>
    <div>
      <el-table
        :data="questionList"
        border
        size="mini"
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column
          type="selection"
          width="55"
        />
        <el-table-column
          type="index"
          prop="序号"
          align="center"
          width="50"
        />
        <el-table-column
          label="题目内容"
        >
          <template slot-scope="scope">
            <div>
              <span v-if="scope.row.isValid == 0" class="statusTag">已失效</span>
              {{ scope.row.title }}
            </div>
          </template>
        </el-table-column>
        <el-table-column
          prop="options"
          label="选项"
        />
        <el-table-column
          width="200"
          prop="correctAnswer"
          label="答案"
        />
        <el-table-column
          width="100"
          align="center"
          prop="scoreValue"
          label="分值"
        />
        <el-table-column
          align="center"
          width="200"
        >
          <template slot="header" slot-scope=" ">
            <el-input
              v-model="search"
              size="mini"
              placeholder="输入关键字搜索"
            />
          </template>
          <template slot-scope="scope">
            <el-button
              size="mini"
              @click="handleEdit(scope.$index, scope.row)"
            >编辑</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="divid-page-class">
        <el-pagination
          background
          layout="prev, pager, next"
          :total="totalItem"
          @current-change="changePage"
        />
      </div>
    </div>
    <el-dialog
      v-if="dialogVisible"
      :title="dialogTitle"
      :visible.sync="dialogVisible"
      :close-on-click-modal="false"
      width="50%"
    >
      <div>
        <add-question :template-id="templateId" :exam-info="examItem" :action="action" /></div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
      </span>
    </el-dialog>

    <el-dialog
      :visible.sync="importDialog"
      title="导入题库"
    >
      <div>题库模板</div>
      <div><el-upload
        class="upload-demo"
        action="https://jsonplaceholder.typicode.com/posts/"
        multiple
        :limit="3"
        :on-exceed="handleExceed"
        :file-list="fileList">
        <el-button size="small" type="primary">点击上传</el-button>
        <div slot="tip" class="el-upload__tip">只能上传xls/xlsx文件</div>
      </el-upload>
        <span slot="footer" class="dialog-footer">
        <el-button>开始上传</el-button>
      </span>
      </div>
    </el-dialog>

  </div>
</template>
<script>
import { getQuestionByTemplate } from '@/api/template'
import { removeQuestionByTemplate } from '@/api/template'
import { batchExpire } from '@/api/question'
import AddQuestion from '@/views/question/addQuestion'
export default {
  components: { AddQuestion },
  data() {
    return {
      importDialog: false,
      typeName: '',
      questionList: [],
      totalItem: '1',
      templateId: 0,
      dialogVisible: false,
      templateList: [],
      examItem: '',
      dialogTitle: '',
      action: '',
      search: '',
      selectedIdList: [],
      fileList:[]
    }
  },
  mounted() {
    const queryParamas = this.$route.query
    const { templateId, configType } = queryParamas
    this.templateId = templateId
    if (configType === 'article') {
      this.typeName = '文库编辑'
    } else if (configType === 'question') {
      this.typeName = '题库编辑'
      const params = {
        templateId: templateId
      }
      getQuestionByTemplate(params).then(res => {
        this.questionList = res.data.records
        this.totalItem = res.data.total
      })
    }
  },
  methods: {
    changePage(val) {
      const params = {
        templateId: this.templateId,
        currentPage: val
      }
      getQuestionByTemplate(params).then(res => {
        this.questionList = res.data.records
        this.totalItem = res.data.total
      })
    },
    addQuestion() {
      this.dialogTitle = '添加题目'
      this.action = 'add'
      this.examItem = {}
      this.dialogVisible = true
    },
    handleEdit(index, row) {
      this.dialogTitle = '修改题目'
      this.action = 'update'
      this.examItem = row
      this.dialogVisible = true
    },
    handleSelectionChange(val) {
      this.selectedIdList = val
    },
    remove() {
      const examIds = this.selectedIdList.map((item) => {
        return item.examId
      })
      const params = {
        examIds: examIds,
        templateId: this.templateId
      }
      removeQuestionByTemplate(params).then(res => {
        this.$message.info(res.data)
        const params = {
          templateId: this.templateId
        }
        getQuestionByTemplate(params).then(res => {
          this.questionList = res.data.records
          this.totalItem = res.data.total
        })
      })
    },
    Expire() {
      const params = this.selectedIdList.map(function(item, index) {
        return item.examId
      })
      batchExpire(params).then(res => {
        this.$message.success()
        this.changePage(1)
      })
    },
    Import() {
      this.importDialog = true
    }
  }
}
</script>
<style scoped>
.statusTag{
  height: 20px;
  width: 100px;
  font-size: 10px;
  background-color: #ca2f2f;
  color: white;
  border-radius: 3px;
  padding: 5px;
}
</style>
